import React,{Component,PropTypes} from 'react';
import CheckList from "./CheckList";
import marked from 'marked';//引入Marked相关
class Card extends Component{

    constructor(){
        super(...arguments);
        this.state={
          showDetails:false
        };
    }

    render(){
        /*只有当showDetails 为true时 cardDetails才有值*/
        let cardDetails;
        if (this.state.showDetails){
            cardDetails=(
                <div className="card_details">
                    {/*使用dangerouslySetInnerHTML 进行渲染 动态生成HTML  这里marked 将marked语句转换为html标签语言*/}
                    <span dangerouslySetInnerHTML={{__html:marked(this.props.card.description)}}></span>
                    <CheckList cardId={this.props.card.id} tasks={this.props.card.tasks} taskCallbacks={this.props.taskCallbacks}/>
                </div>
            );
        }
        //内联样式
        let sideColor={
            position:'absolute',
            zIndex:-1,
            top:0,
            bottom:0,
            left:0,
            width:7,
            backgroundColor:this.props.card.color
        };
        return(<div className="card">
            <div style={sideColor}/>
                <div className={this.state.showDetails?"card_title--is-open":"card_title"}
                     onClick={this.toggleDetails.bind(this)}>{this.props.card.title}</div>
                {/*为空时则不显示呗*/}
                {cardDetails}
        </div>);
    }

    //点击改变是否展示状态
    toggleDetails(){
        this.setState({showDetails:!this.state.showDetails});
    }
}

Card.propTypes = {
   card:PropTypes.object,
    taskCallbacks:PropTypes.object
}
export default Card;